luci-theme-*: ES6 refactor

Signed-off-by: Paul Donald <[email protected]>

diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/resources/menu-bootstrap.js b/themes/luci-theme-bootstrap/htdocs/luci-static/resources/menu-bootstrap.js
index 32922f3842ba9f7d2410a31127753a6b43b6897d..94dcfa816e141466f4ec440375e9ffd92336819a 100644 (file)
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/resources/menu-bootstrap.js
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/resources/menu-bootstrap.js
@@ -3,13 +3,13 @@
 'require ui';
 
 return baseclass.extend({
-       __init__: function() {
+       __init__() {
                ui.menu.load().then(L.bind(this.render, this));
        },
 
-       render: function(tree) {
-               var node = tree,
-                   url = '';
+       render(tree) {
+               let node = tree;
+               let url = '';
 
                this.renderModeMenu(tree);
 
@@ -24,23 +24,23 @@ return baseclass.extend({
                }
        },
 
-       renderTabMenu: function(tree, url, level) {
-               var container = document.querySelector('#tabmenu'),
-                   ul = E('ul', { 'class': 'tabs' }),
-                   children = ui.menu.getChildren(tree),
-                   activeNode = null;
+       renderTabMenu(tree, url, level) {
+               const container = document.querySelector('#tabmenu');
+               const ul = E('ul', { 'class': 'tabs' });
+               const children = ui.menu.getChildren(tree);
+               let activeNode = null;
 
-               for (var i = 0; i < children.length; i++) {
-                       var isActive = (L.env.dispatchpath[3 + (level || 0)] == children[i].name),
-                           activeClass = isActive ? ' active' : '',
-                           className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass);
+               children.forEach(child => {
+                       const isActive = (L.env.dispatchpath[3 + (level || 0)] == child.name);
+                       const activeClass = isActive ? ' active' : '';
+                       const className = 'tabmenu-item-%s %s'.format(child.name, activeClass);
 
                        ul.appendChild(E('li', { 'class': className }, [
-                               E('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] )]));
+                               E('a', { 'href': L.url(url, child.name) }, [ _(child.title) ] )]));
 
                        if (isActive)
-                               activeNode = children[i];
-               }
+                               activeNode = child;
+               });
 
                if (ul.children.length == 0)
                        return E([]);
@@ -54,46 +54,50 @@ return baseclass.extend({
                return ul;
        },
 
-       renderMainMenu: function(tree, url, level) {
-               var ul = level ? E('ul', { 'class': 'dropdown-menu' }) : document.querySelector('#topmenu'),
-                   children = ui.menu.getChildren(tree);
+       renderMainMenu(tree, url, level) {
+               const ul = level ? E('ul', { 'class': 'dropdown-menu' }) : document.querySelector('#topmenu');
+               const children = ui.menu.getChildren(tree);
 
                if (children.length == 0 || level > 1)
                        return E([]);
 
-               for (var i = 0; i < children.length; i++) {
-                       var submenu = this.renderMainMenu(children[i], url + '/' + children[i].name, (level || 0) + 1),
-                           subclass = (!level && submenu.firstElementChild) ? 'dropdown' : null,
-                           linkclass = (!level && submenu.firstElementChild) ? 'menu' : null,
-                           linkurl = submenu.firstElementChild ? '#' : L.url(url, children[i].name);
+               children.forEach(child => {
+                       const submenu = this.renderMainMenu(child, url + '/' + child.name, (level || 0) + 1);
+                       const subclass = (!level && submenu.firstElementChild) ? 'dropdown' : '';
+                       const linkclass = (!level && submenu.firstElementChild) ? 'menu' : '';
+                       const linkurl = submenu.firstElementChild ? '#' : L.url(url, child.name);
 
-                       var li = E('li', { 'class': subclass }, [
-                               E('a', { 'class': linkclass, 'href': linkurl }, [ _(children[i].title) ]),
+                       const li = E('li', { 'class': subclass }, [
+                               E('a', { 'class': linkclass, 'href': linkurl }, [
+                                       _(child.title),
+                               ]),
                                submenu
                        ]);
 
                        ul.appendChild(li);
-               }
+               });
 
                ul.style.display = '';
 
                return ul;
        },
 
-       renderModeMenu: function(tree) {
-               var ul = document.querySelector('#modemenu'),
-                   children = ui.menu.getChildren(tree);
+       renderModeMenu(tree) {
+               const ul = document.querySelector('#modemenu');
+               const children = ui.menu.getChildren(tree);
 
-               for (var i = 0; i < children.length; i++) {
-                       var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0);
+               children.forEach((child, index) => {
+                       const isActive = L.env.requestpath.length
+                               ? child.name === L.env.requestpath[0]
+                               : index === 0;
 
-                       ul.appendChild(E('li', { 'class': isActive ? 'active' : null }, [
-                               E('a', { 'href': L.url(children[i].name) }, [ _(children[i].title) ])
+                       ul.appendChild(E('li', { 'class': isActive ? 'active' : '' }, [
+                               E('a', { 'href': L.url(child.name) }, [ _(child.title) ])
                        ]));
 
                        if (isActive)
-                               this.renderMainMenu(children[i], children[i].name);
-               }
+                               this.renderMainMenu(child, child.name);
+               });
 
                if (ul.children.length > 1)
                        ul.style.display = '';

diff --git a/themes/luci-theme-material/htdocs/luci-static/resources/menu-material.js b/themes/luci-theme-material/htdocs/luci-static/resources/menu-material.js
index a994c4f4630cf86c71879ecff5dd01224313313b..bf39705cd6e7ed77358a5943caeecbe0a02bc915 100644 (file)
--- a/themes/luci-theme-material/htdocs/luci-static/resources/menu-material.js
+++ b/themes/luci-theme-material/htdocs/luci-static/resources/menu-material.js
@@ -3,13 +3,13 @@
 'require ui';
 
 return baseclass.extend({
-       __init__: function() {
+       __init__() {
                ui.menu.load().then(L.bind(this.render, this));
        },
 
-       render: function(tree) {
-               var node = tree,
-                   url = '';
+       render(tree) {
+               let node = tree;
+               let url = '';
 
                this.renderModeMenu(node);
 
@@ -39,8 +39,10 @@ return baseclass.extend({
                
        },
 
-       handleMenuExpand: function(ev) {
-               var a = ev.target, ul1 = a.parentNode, ul2 = a.nextElementSibling;
+       handleMenuExpand(ev) {
+               const a = ev.target;
+               const ul1 = a.parentNode;
+               const ul2 = a.nextElementSibling;
 
                document.querySelectorAll('li.slide.active').forEach(function(li) {
                        if (li !== a.parentNode || li == ul1) {
@@ -66,29 +68,31 @@ return baseclass.extend({
                ev.stopPropagation();
        },
 
-       renderMainMenu: function(tree, url, level) {
-               var l = (level || 0) + 1,
-                   ul = E('ul', { 'class': level ? 'slide-menu' : 'nav' }),
-                   children = ui.menu.getChildren(tree);
+       renderMainMenu(tree, url, level) {
+               const l = (level || 0) + 1;
+               const ul = E('ul', { 'class': level ? 'slide-menu' : 'nav' });
+               const children = ui.menu.getChildren(tree);
 
                if (children.length == 0 || l > 2)
                        return E([]);
 
-               for (var i = 0; i < children.length; i++) {
-                       var isActive = (L.env.dispatchpath[l] == children[i].name),
-                           submenu = this.renderMainMenu(children[i], url + '/' + children[i].name, l),
-                           hasChildren = submenu.children.length;
+               children.forEach(child => {
+                       const submenu = this.renderMainMenu(child, url + '/' + child.name, l);
+                       const isActive = (L.env.dispatchpath[l] == child.name);
+                       const hasChildren = submenu.children.length;
 
                        ul.appendChild(E('li', { 'class': (hasChildren ? 'slide' + (isActive ? ' active' : '') : (isActive ? ' active' : ''))}, [
                                E('a', {
-                                       'href': hasChildren ? '#' : L.url(url, children[i].name),
-                                       'class': hasChildren ? 'menu' + (isActive ? ' active' : '') : null,
-                                       'click': hasChildren ? ui.createHandlerFn(this, 'handleMenuExpand') : null,
-                                       'data-title': hasChildren ? null : _(children[i].title),
-                               }, [ _(children[i].title) ]),
+                                       'href': hasChildren ? '#' : L.url(url, child.name),
+                                       'class': hasChildren ? 'menu' + (isActive ? ' active' : '') : '',
+                                       'click': hasChildren ? ui.createHandlerFn(this, 'handleMenuExpand') : '',
+                                       'data-title': hasChildren ? '' : _(child.title),
+                               }, [
+                                       _(child.title)
+                               ]),
                                submenu
                        ]));
-               }
+               });
 
                if (l == 1) {
                        var container = document.querySelector('#mainmenu');
@@ -100,53 +104,57 @@ return baseclass.extend({
                return ul;
        },
 
-       renderModeMenu: function(tree) {
-               var ul = document.querySelector('#modemenu'),
-                   children = ui.menu.getChildren(tree);
+       renderModeMenu(tree) {
+               const ul = document.querySelector('#modemenu');
+               const children = ui.menu.getChildren(tree);
 
-               for (var i = 0; i < children.length; i++) {
-                       var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0);
+               children.forEach((child, index) => {
+                       const isActive = L.env.requestpath.length
+                               ? child.name === L.env.requestpath[0]
+                               : index === 0;
 
                        ul.appendChild(E('li', {}, [
                                E('a', {
-                                       'href': L.url(children[i].name),
-                                       'class': isActive ? 'active' : null
-                               }, [ _(children[i].title) ])
+                                       'href': L.url(child.name),
+                                       'class': isActive ? 'active' : ''
+                               }, [ _(child.title) ])
                        ]));
 
                        if (isActive)
-                               this.renderMainMenu(children[i], children[i].name);
+                               this.renderMainMenu(child, child.name);
 
-                       if (i > 0 && i < children.length)
+                       if (index > 0 && index < children.length)
                                ul.appendChild(E('li', {'class': 'divider'}, [E('span')]))
-               }
+               });
 
                if (children.length > 1)
                        ul.parentElement.style.display = '';
        },
 
-       renderTabMenu: function(tree, url, level) {
-               var container = document.querySelector('#tabmenu'),
-                           l = (level || 0) + 1,
-                           ul = E('ul', { 'class': 'tabs' }),
-                           children = ui.menu.getChildren(tree),
-                           activeNode = null;
+       renderTabMenu(tree, url, level) {
+               const container = document.querySelector('#tabmenu');
+               const l = (level || 0) + 1;
+               const ul = E('ul', { 'class': 'tabs' });
+               const children = ui.menu.getChildren(tree);
+               let activeNode = null;
 
                if (children.length == 0)
                        return E([]);
 
-               for (var i = 0; i < children.length; i++) {
-                       var isActive = (L.env.dispatchpath[l + 2] == children[i].name),
-                               activeClass = isActive ? ' active' : '',
-                               className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass);
+               children.forEach(child => {
+                       const isActive = (L.env.dispatchpath[l + 2] == child.name);
+                       const activeClass = isActive ? ' active' : '';
+                       const className = 'tabmenu-item-%s %s'.format(child.name, activeClass);
 
                        ul.appendChild(E('li', { 'class': className }, [
-                               E('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] )
+                               E('a', { 'href': L.url(url, child.name) }, [
+                                       _(child.title)
+                               ])
                        ]));
 
                        if (isActive)
-                               activeNode = children[i];
-               }
+                               activeNode = child;
+               })
 
                container.appendChild(ul);
                container.style.display = '';
@@ -157,12 +165,12 @@ return baseclass.extend({
                return ul;
        },
 
-       handleSidebarToggle: function(ev) {
-               var width = window.innerWidth,
-                   darkMask = document.querySelector('.darkMask'),
-                   mainRight = document.querySelector('.main-right'),
-                   mainLeft = document.querySelector('.main-left'),
-                   open = mainLeft.style.width == '';
+       handleSidebarToggle(ev) {
+               const width = window.innerWidth;
+               const darkMask = document.querySelector('.darkMask');
+               const mainRight = document.querySelector('.main-right');
+               const mainLeft = document.querySelector('.main-left');
+               let open = mainLeft.style.width == '';
 
                if (width > 1152 || ev.type == 'resize')
                        open = true;

diff --git a/themes/luci-theme-openwrt-2020/htdocs/luci-static/resources/menu-openwrt2020.js b/themes/luci-theme-openwrt-2020/htdocs/luci-static/resources/menu-openwrt2020.js
index b6fbfd4c2fd37159b09163b1acf6998807825021..e1e9a40680026a769d7330c63de2498fa1be55ac 100644 (file)
--- a/themes/luci-theme-openwrt-2020/htdocs/luci-static/resources/menu-openwrt2020.js
+++ b/themes/luci-theme-openwrt-2020/htdocs/luci-static/resources/menu-openwrt2020.js
@@ -3,13 +3,13 @@
 'require ui';
 
 return baseclass.extend({
-       __init__: function() {
+       __init__() {
                ui.menu.load().then(L.bind(this.render, this));
        },
 
-       render: function(tree) {
-               var node = tree,
-                   url = '';
+       render(tree) {
+               let node = tree;
+               let url = '';
 
                this.renderModeMenu(node);
 
@@ -27,10 +27,12 @@ return baseclass.extend({
                        .addEventListener('click', ui.createHandlerFn(this, 'handleSidebarToggle'));
        },
 
-       handleMenuExpand: function(ev) {
-               var a = ev.target, ul1 = a.parentNode.parentNode, ul2 = a.nextElementSibling;
+       handleMenuExpand(ev) {
+               const a = ev.target;
+               const ul1 = a.parentNode.parentNode;
+               const ul2 = a.nextElementSibling;
 
-               document.querySelectorAll('ul.mainmenu.l1 > li.active').forEach(function(li) {
+               document.querySelectorAll('ul.mainmenu.l1 > li.active').forEach(li => {
                        if (li !== a.parentNode)
                                li.classList.remove('active');
                });
@@ -49,27 +51,28 @@ return baseclass.extend({
                ev.stopPropagation();
        },
 
-       renderMainMenu: function(tree, url, level) {
-               var l = (level || 0) + 1,
-                   ul = E('ul', { 'class': 'mainmenu l%d'.format(l) }),
-                   children = ui.menu.getChildren(tree);
+       renderMainMenu(tree, url, level) {
+               const l = (level || 0) + 1;
+               const ul = E('ul', { 'class': 'mainmenu l%d'.format(l) });
+               const children = ui.menu.getChildren(tree);
 
                if (children.length == 0 || l > 2)
                        return E([]);
 
-               for (var i = 0; i < children.length; i++) {
-                       var isActive = (L.env.dispatchpath[l] == children[i].name),
-                           isReadonly = children[i].readonly,
-                           activeClass = 'mainmenu-item-%s%s'.format(children[i].name, isActive ? ' selected' : '');
+               children.forEach(child => {
+                       const isActive = (L.env.dispatchpath[l] == child.name);
+                       const activeClass = 'mainmenu-item-%s%s'.format(child.name, isActive ? ' selected' : '');
 
                        ul.appendChild(E('li', { 'class': activeClass }, [
                                E('a', {
-                                       'href': L.url(url, children[i].name),
-                                       'click': (l == 1) ? ui.createHandlerFn(this, 'handleMenuExpand') : null
-                               }, [ _(children[i].title) ]),
-                               this.renderMainMenu(children[i], url + '/' + children[i].name, l)
+                                       'href': L.url(url, child.name),
+                                       'click': (l == 1) ? ui.createHandlerFn(this, 'handleMenuExpand') : ''
+                               }, [
+                                       _(child.title)
+                               ]),
+                               this.renderMainMenu(child, url + '/' + child.name, l)
                        ]));
-               }
+               });
 
                if (l == 1)
                        document.querySelector('#mainmenu').appendChild(E('div', [ ul ]));
@@ -77,50 +80,56 @@ return baseclass.extend({
                return ul;
        },
 
-       renderModeMenu: function(tree) {
-               var menu = document.querySelector('#modemenu'),
-                   children = ui.menu.getChildren(tree);
+       renderModeMenu(tree) {
+               const menu = document.querySelector('#modemenu');
+               const children = ui.menu.getChildren(tree);
 
-               for (var i = 0; i < children.length; i++) {
-                       var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0);
+               children.forEach((child, index) => {
+                       const isActive = L.env.requestpath.length
+                               ? child.name === L.env.requestpath[0]
+                               : index === 0;
 
-                       if (i > 0)
+                       if (index > 0)
                                menu.appendChild(E([], ['\u00a0|\u00a0']));
 
-                       menu.appendChild(E('div', { 'class': isActive ? 'active' : null }, [
-                               E('a', { 'href': L.url(children[i].name) }, [ _(children[i].title) ])
+                       menu.appendChild(E('div', { 'class': isActive ? 'active' : '' }, [
+                               E('a', { href: L.url(child.name) }, [
+                                       _(child.title)
+                               ])
                        ]));
 
                        if (isActive)
-                               this.renderMainMenu(children[i], children[i].name);
-               }
+                               this.renderMainMenu(child, child.name);
+               });
 
                if (menu.children.length > 1)
                        menu.style.display = '';
        },
 
-       renderTabMenu: function(tree, url, level) {
-               var container = document.querySelector('#tabmenu'),
-                   l = (level || 0) + 1,
-                   ul = E('ul', { 'class': 'cbi-tabmenu' }),
-                   children = ui.menu.getChildren(tree),
-                   activeNode = null;
+       renderTabMenu(tree, url, level) {
+               const container = document.querySelector('#tabmenu');
+               const l = (level || 0) + 1;
+               const ul = E('ul', { 'class': 'cbi-tabmenu' });
+               const children = ui.menu.getChildren(tree);
+               let activeNode = null;
 
                if (children.length == 0)
                        return E([]);
 
-               for (var i = 0; i < children.length; i++) {
-                       var isActive = (L.env.dispatchpath[l + 2] == children[i].name),
-                           activeClass = isActive ? ' cbi-tab' : '',
-                           className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass);
+               children.forEach(child => {
+                       const isActive = (L.env.dispatchpath[l + 2] == child.name);
+                       const activeClass = isActive ? ' cbi-tab' : '';
+                       const className = 'tabmenu-item-%s %s'.format(child.name, activeClass);
 
                        ul.appendChild(E('li', { 'class': className }, [
-                               E('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] )
+                               E('a', { 'href': L.url(url, child.name) }, [
+                                       _(child.title)
+                               ])
                        ]));
 
                        if (isActive)
-                               activeNode = children[i];
-               }
+                               activeNode = child;
+               });
 
                container.appendChild(ul);
                container.style.display = '';
@@ -131,9 +140,9 @@ return baseclass.extend({
                return ul;
        },
 
-       handleSidebarToggle: function(ev) {
-               var btn = ev.currentTarget,
-                   bar = document.querySelector('#mainmenu');
+       handleSidebarToggle(ev) {
+               const btn = ev.currentTarget;
+               const bar = document.querySelector('#mainmenu');
 
                if (btn.classList.contains('active')) {
                        btn.classList.remove('active');

diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/resources/menu-openwrt.js b/themes/luci-theme-openwrt/htdocs/luci-static/resources/menu-openwrt.js
index ca97838d3a3f0f1ae1b1b23f173c12902773c387..e3352a599cb4c6d534f37aee35f575fef151a240 100644 (file)
--- a/themes/luci-theme-openwrt/htdocs/luci-static/resources/menu-openwrt.js
+++ b/themes/luci-theme-openwrt/htdocs/luci-static/resources/menu-openwrt.js
@@ -3,13 +3,13 @@
 'require ui';
 
 return baseclass.extend({
-       __init__: function() {
+       __init__() {
                ui.menu.load().then(L.bind(this.render, this));
        },
 
-       render: function(tree) {
-               var node = tree,
-                   url = '';
+       render(tree) {
+               let node = tree;
+               let url = '';
 
                this.renderModeMenu(tree);
 
@@ -24,8 +24,10 @@ return baseclass.extend({
                }
        },
 
-       handleMenuExpand: function(ev) {
-               var a = ev.target, ul1 = a.parentNode.parentNode, ul2 = a.nextElementSibling;
+       handleMenuExpand(ev) {
+               const a = ev.target;
+               const ul1 = a.parentNode.parentNode
+               const ul2 = a.nextElementSibling;
 
                document.querySelectorAll('ul.mainmenu.l1 > li.active').forEach(function(li) {
                        if (li !== a.parentNode)
@@ -46,26 +48,29 @@ return baseclass.extend({
                ev.stopPropagation();
        },
 
-       renderMainMenu: function(tree, url, level) {
-               var l = (level || 0) + 1,
-                   ul = E('ul', { 'class': 'mainmenu l%d'.format(l) }),
-                   children = ui.menu.getChildren(tree);
+       renderMainMenu(tree, url, level) {
+               const l = (level || 0) + 1;
+               const ul = E('ul', { 'class': 'mainmenu l%d'.format(l) });
+               const children = ui.menu.getChildren(tree);
 
                if (children.length == 0 || l > 2)
                        return E([]);
 
-               for (var i = 0; i < children.length; i++) {
-                       var isActive = (L.env.dispatchpath[l] == children[i].name),
-                           activeClass = 'mainmenu-item-%s%s'.format(children[i].name, isActive ? ' selected' : '');
+               children.forEach(child => {
+                       const isActive = (L.env.dispatchpath[l] == child.name);
+                       const activeClass = 'mainmenu-item-%s%s'.format(child.name, isActive ? ' selected' : '');
+                       const isReadonly = child.readonly;
 
                        ul.appendChild(E('li', { 'class': activeClass }, [
                                E('a', {
-                                       'href': L.url(url, children[i].name),
-                                       'click': (l == 1) ? this.handleMenuExpand : null,
-                               }, [ _(children[i].title) ]),
-                               this.renderMainMenu(children[i], url + '/' + children[i].name, l)
+                                       'href': L.url(url, child.name),
+                                       'click': (l == 1) ? this.handleMenuExpand : '',
+                               }, [
+                                       _(child.title)
+                               ]),
+                               this.renderMainMenu(child, url + '/' + child.name, l)
                        ]));
-               }
+               });
 
                if (l == 1) {
                        var container = document.querySelector('#mainmenu');
@@ -78,49 +83,51 @@ return baseclass.extend({
        },
 
        renderModeMenu: function(tree) {
-               var ul = document.querySelector('#modemenu'),
-                   children = ui.menu.getChildren(tree);
+               const ul = document.querySelector('#modemenu');
+               const children = ui.menu.getChildren(tree);
 
-               for (var i = 0; i < children.length; i++) {
-                       var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0);
+               children.forEach((child, index)=> {
+                       const isActive = L.env.requestpath.length
+                               ? child.name === L.env.requestpath[0]
+                               : index === 0;
 
                        ul.appendChild(E('li', {}, [
                                E('a', {
-                                       'href': L.url(children[i].name),
-                                       'class': isActive ? 'active' : null
-                               }, [ _(children[i].title) ])
+                                       'href': L.url(child.name),
+                                       'class': isActive ? 'active' : ''
+                               }, [ _(child.title) ])
                        ]));
 
                        if (isActive)
-                               this.renderMainMenu(children[i], children[i].name);
-               }
+                               this.renderMainMenu(child, child.name);
+               });
 
                if (ul.children.length > 1)
                        ul.style.display = '';
        },
 
        renderTabMenu: function(tree, url, level) {
-               var container = document.querySelector('#tabmenu'),
-                   l = (level || 0) + 1,
-                   ul = E('ul', { 'class': 'cbi-tabmenu' }),
-                   children = ui.menu.getChildren(tree),
-                   activeNode = null;
+               const container = document.querySelector('#tabmenu');
+               const l = (level || 0) + 1;
+               const ul = E('ul', { 'class': 'cbi-tabmenu' });
+               const children = ui.menu.getChildren(tree);
+               let activeNode = null;
 
                if (children.length == 0)
                        return E([]);
 
-               for (var i = 0; i < children.length; i++) {
-                       var isActive = (L.env.dispatchpath[l + 2] == children[i].name),
-                           activeClass = isActive ? ' cbi-tab' : '',
-                           className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass);
+               children.forEach(child => {                     
+                       const isActive = (L.env.dispatchpath[l + 2] == child.name);
+                       const activeClass = isActive ? ' cbi-tab' : '';
+                       const className = 'tabmenu-item-%s %s'.format(child.name, activeClass);
 
                        ul.appendChild(E('li', { 'class': className }, [
-                               E('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] )
+                               E('a', { 'href': L.url(url, child.name) }, [ _(child.title) ] )
                        ]));
 
                        if (isActive)
-                               activeNode = children[i];
-               }
+                               activeNode = child;
+               });
 
                container.appendChild(ul);
                container.style.display = '';